<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>


<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
  <canvas id="canvasId" width="600" height="600"</canvas>
</div>


<!-- Create a script to initialize the chart -->
<script>

  <!-- Create the data for the graph -->
  var data = {
     "y" : {
        "data" : [
          [0.665,1.561],
          [0.701,1.99],
          [0.71,2.118],
          [0.767,3.834],
          [0.801,4.602],
          [0.807,5.199],
          [0.825,4.255],
          [0.831,4.818],
          [0.891,5.064],
          [0.902,5.283],
          [0.928,5.344],
          [0.97,4.691],
          [0.973,5.055],
          [0.98,4.937],
          [0.997,3.752],
          [1,3.965],
          [1.021,3.275],
          [1.045,2.849],
          [1.074,2.286],
          [1.089,1.64],
          [1.148,0.97],
          [1.224,0.537]
        ],
        "smps" : ["E","NOx"],
        "vars" : ["V1","V2","V3","V4","V5","V6","V7","V8","V9","V10","V11","V12","V13","V14","V15","V16","V17","V18","V19","V20","V21","V22"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "graphType":"Scatter2D",
     "showConfidenceIntervals":"true",
     "showLoessFit":"true",
     "theme":"CanvasXpress",
     "title":"Loess Fit",
     "xAxis":[
        "E"
     ],
     "yAxis":[
        "NOx"
     ]
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


</script>